﻿<UserControl
    x:Class="Padsurface.App.UserControls.TempoUserControl"
    x:Name="tempoUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Padsurface.App.UserControls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Height="Auto"
    Width="Auto"
    d:DesignHeight="180"
    d:DesignWidth="360"
    d:DataContext="{Binding Source={d:DesignInstance Type=local:DesignTimeData, IsDesignTimeCreatable=True}}">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20">
            <TextBlock Text="{Binding Bpm, ElementName=tempoUserControl}" x:Name="bpmValue"
                   Style="{StaticResource HeaderTextStyle}" />
            
            <TextBlock Text="BPM"
                       Style="{StaticResource SubheaderTextStyle}"
                       Margin="10,0,0,0" />
        </StackPanel>

        <StackPanel Grid.Column="1" Orientation="Vertical" Margin="20">
            <Button x:Name="increaseButton" Style="{StaticResource OutAppBarButtonStyle}" AutomationProperties.Name=""
                    Command="{Binding IncreaseTempoCommand, ElementName=tempoUserControl}" 
                    ClickMode="Press" Tapped="IncreaseButtonTapped" Holding="IncreaseButtonHolding" />

            <Button x:Name="decreaseButton" Style="{StaticResource OutAppBarButtonStyle}" AutomationProperties.Name=""
                    Command="{Binding DecreaseTempoCommand, ElementName=tempoUserControl}" 
                    ClickMode="Press" Tapped="DecreaseButtonTapped" Holding="DecreaseButtonHolding">
                <Button.RenderTransform>
                    <TransformGroup>
                        <RotateTransform Angle="-180" CenterX="50" CenterY="45"/>
                    </TransformGroup>
                </Button.RenderTransform>
            </Button>
        </StackPanel>
        
    </Grid>
</UserControl>
